@import '../../styles/variables';
@import '../../styles/mixins';

//== Main diagram wrapper

.diagram {
  align-items: center;
  color: $ms-color-white;
  display: flex;
  flex-direction: column;

  @media screen and (min-width: $ms-screen-min-xl) {
    flex-direction: row; // Horizontal layout on extra large screens
  }

  a,
  a:visited {
    color: $ms-color-white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: border-color $ms-animation-duration-2 $ms-animation-ease-1;
  }

  a:hover {
    border-color: $ms-color-white;
  }
}

//== Core section

.core {
  align-items: center;
  display: flex;
  flex-direction: column;

  @media screen and (min-width: $ms-screen-min-md) and (max-width: $ms-screen-max-lg) {
    flex-direction: row;
  }

  img {
    align-self: center;
    max-width: 200px;

    @media screen and (min-width: $ms-screen-min-xl) {
      margin-bottom: 20px;
    }

    @media screen and (min-width: $ms-screen-min-md) and (max-width: $ms-screen-max-lg) {
      margin-right: 28px;
    }
  }

  .text {
    max-width: 240px;
  }
}

//== Or text
.or {
  background-color: $ms-color-neutralSecondary;
  border-radius: 50%;
  color: $ms-color-white;
  display: block;
  flex-shrink: 0;
  font-size: $ms-font-size-l;
  font-weight: $ms-font-weight-semibold;
  height: 40px;
  line-height: 36px;
  margin: 20px 0;
  text-align: center;
  width: 40px;

  @media screen and (min-width: $ms-screen-min-xl) {
    margin: 0 20px 0 4px; // Give it some space in the horizontal layout
  }
}

//== Components section

.components {
  display: flex;
  flex-direction: column;
  width: 100%;

  // Horizontal layout on large screens
  @media screen and (min-width: $uhf-screen-min-mobile) {
    flex-direction: row;
    margin-top: 40px;
  }
}

// Individual component and its content wrapper
.component {
  display: flex;
  margin-bottom: 28px;
  width: 100%;

  .content {
    align-items: flex-start;
    background-color: #708e7e;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 16px 16px 24px 16px;
  }

  &.featuredComponent .content {
    background-color: #836c9f;
  }

  // Horizontal layout
  @media screen and (min-width: $uhf-screen-min-mobile) {
    flex-direction: column;
    margin: 0 0 0 16px;

    // Lift the featured component out
    &.featuredComponent {
      margin-left: 0;
      position: relative;
      top: -40px;

      .componentImage {
        height: 130px;
      }

      .content {
        margin-bottom: -40px;
      }
    }
  }
}

// Graphics within a component
.graphics {
  align-items: center;
  background-color: #b8ecd2; // @todo: Make variable or snap to existing color
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 20px;

  @media screen and (min-width: $uhf-screen-min-mobile) {
    width: 100%;
  }
}

.coreImage {
  height: 100%;
  max-height: 180px;
  max-width: 180px;
  width: 100%;
}

.componentImage {
  margin-bottom: 16px;
  width: 100%;
}

.headline {
  color: $ms-color-white;
  display: block;
  font-size: $ms-font-size-xl;
  font-weight: $ms-font-weight-semibold;
  margin-bottom: 8px;
}

.description {
  color: $ms-color-white;
  display: block;
  flex-grow: 1;
  margin-bottom: 20px;
  width: 100%;
}
